<template>
    <div class="container">
        <div class="title">
            <p>卖品市场</p>
        </div>
        <div class="card-items">
            <div class="card-item" v-for="card in cardInfo">
                <shop-card  v-bind="card"/>
            </div>
        </div>
    </div>
</template>
<script>
import shopCard from './shopCard.vue';
    export default {
        name: "shopMain",
        data(){
            return {
                cardInfo: [
                    {
                        imageTitle: "高领毛衣",
                        imageUrl: require("../../assets/images/user/maoyi.jpg"),
                        price: 230,
                        info: "适合秋冬季节"
                    },
                    {
                        imageTitle: "夹克",
                        imageUrl: require("../../assets/images/user/jiake.jpg"),
                        price: 230,
                        info: "适合秋冬季节"
                    },
                    {
                        imageTitle: "高领毛衣",
                        imageUrl: require("../../assets/images/user/maoyi.jpg"),
                        price: 230,
                        info: "适合秋冬季节"
                    },
                    {
                        imageTitle: "高领毛衣",
                        imageUrl: require("../../assets/images/user/maoyi.jpg"),
                        price: 230,
                        info: "适合秋冬季节"
                    },
                    {
                        imageTitle: "高领毛衣",
                        imageUrl: require("../../assets/images/user/maoyi.jpg"),
                        price: 230,
                        info: "适合秋冬季节"
                    },
                    {
                        imageTitle: "高领毛衣",
                        imageUrl: require("../../assets/images/user/maoyi.jpg"),
                        price: 230,
                        info: "适合秋冬季节"
                    },
                    {
                        imageTitle: "高领毛衣",
                        imageUrl: require("../../assets/images/user/maoyi.jpg"),
                        price: 230,
                        info: "适合秋冬季节"
                    },
                    {
                        imageTitle: "高领毛衣",
                        imageUrl: require("../../assets/images/user/maoyi.jpg"),
                        price: 230,
                        info: "适合秋冬季节"
                    },
                    
                ]
            }
        },
        components: {
            shopCard
        }

    }
</script>
<style scoped>
    .container{
        width: 100vw;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: flex-start;
    }

    .title{
        font-size: 30px;
        text-align: center;
        width: 100%;
        height: 50px;
        margin-top: 50px;
    }

    .card-items{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-around;
    }

    .card-item{
        width: 25%;
        margin-top: 25px;
        display: flex;
        justify-content: center;
    }
</style>